<template>
    <div class="book-item" @click="toDetail">
        <u--image
            :src="item.headerPicture"
            mode="aspectFill"
            :lazy-load="true"
            width="180rpx"
            height="180rpx"
            radius="8rpx"
        ></u--image>
        <div class="right">
            <div class="book-info">
                <div class="left">
                    <p class="name">{{ item.name || '' }}</p>
                    <p class="addr">{{ item.address || '' }}</p>
                    <p class="time">营业时间：{{ item.openingHours || '' }}</p>
                </div>
                <div class="to-shop" v-if="toShop">
                    <u-button
                        shape="circle"
                        color="#5428EC"
                        size="mini"
                        text="进店"
                        :customStyle="{
                            width: '64rpx',
                            minWidth: '68rpx',
                            fontSize: '24rpx',
                            margin: 0,
                        }"
                    ></u-button>
                </div>
            </div>
            <div class="footer">
                <div class="tag-list">
                    <template v-if="item.labels">
                        <div class="tag-item" v-for="(e, i) in item.labels" :key="i">
                            <u-tag
                                :text="e.name"
                                :borderColor="e.bcolor"
                                :bgColor="e.bcolor"
                                :color="e.fcolor"
                                size="mini"
                                type="warning"
                            ></u-tag>
                        </div>
                    </template>
                </div>
                <div class="location" v-if="item.distance">
                    <img class="image" src="@/static/images/index/fly.png" />
                    {{ item.distance || '' }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'BookItem',
    props: {
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
        toShop: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
    },
    methods: {
        toDetail() {
            if (!uni.getStorageSync('token')) {
                uni.navigateTo({
                    url: '/pages/login/index',
                });
                return false;
            }
            if (this.toShop) {
                uni.navigateTo({
                    url: '/pages/room/detail?id=' + this.item.id,
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.book-item {
    width: 100%;
    border-radius: 24rpx;
    padding: 22rpx 24rpx;
    box-sizing: border-box;
    @include flexBox(space-between);
    .right {
        flex: 1;
        height: 180rpx;
        margin-left: 20rpx;
        overflow: hidden;
        @include flexBox(space-between, flex-start, column);
        .book-info {
            width: 100%;
            @include flexBox(space-between, flex-start);
            .left {
                width: 80%;
                .name {
                    font-size: 28rpx;
                    color: #2f2f2f;
                    font-weight: 600;
                    margin-bottom: 8rpx;
                    @include ellipsis(1);
                }
                .addr {
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #898989;
                }
                .time {
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #898989;
                }
            }
        }
        .footer {
            width: 100%;
            font-size: 20rpx;
            @include flexBox(space-between, center);
            .tag-list {
                flex: 1;
                overflow: auto;
                @include flexBox(flex-start);
                .tag-item {
                    margin-right: 10rpx;
                }
            }
            .location {
                @include flexBox(center, center);
                font-size: 24rpx;
                font-weight: 500;
                color: #5c5c5c;
                .image {
                    width: 20rpx;
                    height: 20rpx;
                    background: none;
                }
            }
        }
    }
}
::v-deep .u-tag-wrapper {
    margin-right: 10rpx;
}
</style>
